<template>
  <el-dialog class="dialog" title="详细查询" :visible.sync="visible" width="50%" :close-on-click-modal="false">
    <el-form id="searchDetailForm" :model="detailSearchModel" ref="form" label-width="100px" :inline="true" size="mini">
      <el-row :gutter="20">
        <!-- <el-col :span="12" :offset="0">
            <el-form-item label="部门名称" size="mini">
              <el-select style="width:100%" v-model="deptCodeArr" multiple filterable remote reserve-keyword placeholder="请输入部门名称" :remote-method="remoteMethodForDept" :loading="deptLoading">
                <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        <el-col :span="12" :offset="0">
          <el-form-item label="部门名称">
            <el-select style="width:100%" v-model="createdepart" placeholder="请选择部门名称" filterable collapse-tags clearable multiple @change="doQueryConcatCreateDepart">
              <el-option v-for="item in codeModel.deptCommonCodeList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="项目名称">
            <el-input style="" v-model="queryParam.qry_projectname" placeholder="请输入名称或编号" @keyup.enter.native="doQuery"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="项目经理">
            <el-input style="" v-model="queryParam.qry_projectmanager" placeholder="工号或姓名" @keyup.enter.native="doQuery"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="项目编号">
            <el-input style="" v-model="queryParam.qry_projectcode" placeholder="请输入项目编号" @keyup.enter.native="doQuery"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="项目级别">
            <el-select style="width:100%" v-model="projectlevel" multiple placeholder="请选择项目级别" @change="doQueryConcatProjectLevel">
              <el-option v-for="item in codeModel.projectlevelList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="项目类型">
            <el-select style="width:100%" v-model="pmoprojecttype" multiple placeholder="请选择项目类型" @change="doQueryConcatPmoProjectType">
              <el-option v-for="item in codeModel.pmoprojecttypeList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12" :offset="0">
          <el-form-item label="项目周期">
            <el-input class="unitInput" v-model="queryParam.qry_bidcycle" placeholder="请输入项目周期" @keyup.enter.native="doQuery"
              ><template #append
                >天</template
              >
            </el-input>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row :gutter="20">
        <el-col :xl="12" :sm="24" :offset="0">
          <el-form-item label="立项日期" size="mini" style="width:100%">
            <el-date-picker style="width:100%" :editable="false" v-model="daterangeForFinishDate" type="daterange" range-separator="至" :picker-options="pickerOptions" start-placeholder="如：2021-01-01" end-placeholder="如：2021-01-01" value-format="yyyy-MM-dd" @change="daterangeForFinishDateChange"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xl="12" :sm="24" :offset="0">
          <el-form-item label="结项日期" size="mini" style="width:100%;">
            <el-date-picker style="width:100%" :editable="false" v-model="daterangeForActualEndDate" type="daterange" range-separator="至" :picker-options="pickerOptions" start-placeholder="如：2021-01-01" end-placeholder="如：2021-01-01" value-format="yyyy-MM-dd" @change="daterangeForActualEndDateChange"> </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :xl="12" :sm="24" :offset="0">
          <el-form-item label="挂网日期" size="mini" style="width:100%">
            <el-date-picker style="width:100%" :editable="false" v-model="daterangeForBidBeginDate" type="daterange" range-separator="至" :picker-options="pickerOptions" start-placeholder="如：2021-01-01" end-placeholder="如：2021-01-01" value-format="yyyy-MM-dd" @change="daterangeForBidBeginDateChange"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xl="12" :sm="24" :offset="0">
          <el-form-item label="开标日期" size="mini" style="width:100%">
            <el-date-picker style="width:100%" :editable="false" v-model="daterangeForBidEndDate" type="daterange" range-separator="至" :picker-options="pickerOptions" start-placeholder="如：2021-01-01" end-placeholder="如：2021-01-01" value-format="yyyy-MM-dd" @change="daterangeForBidEndDateChange"> </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="结项类型">
            <el-select style="width:100%" v-model="endtype" multiple placeholder="请选择结项类型" @change="doQueryConcatEndType">
              <el-option v-for="item in codeModel.mpmEndTypeList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="异常状态">
            <el-select style="width:100%" v-model="abnormalstates" multiple placeholder="请选择异常状态" @change="doQueryConcatAbnormalState">
              <el-option v-for="item in codeModel.mpmProjectAbnormalStateList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="sponsor">
            <el-input style="" v-model="queryParam.qry_sponsor" placeholder="请输入姓名" @keyup.enter.native="doQuery"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="owner">
            <el-input style="" v-model="queryParam.qry_owner" placeholder="请输入姓名" @keyup.enter.native="doQuery"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="项目阶段">
            <el-select style="width:100%" v-model="projectstates" filterable clearable multiple collapse-tags placeholder="请选择项目阶段" @change="doQueryConcatProjectState">
              <el-option v-for="item in codeModel.projectstateList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="工作组成员">
            <el-input style="" v-model="queryParam.qry_decisionusername" placeholder="请输入工作组成员" @keyup.enter.native="doQuery"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="线索/机会点">
            <el-select style="width:100%" v-model="projectsource" multiple placeholder="请选择线索/机会点" @change="concatProjectSource">
              <el-option v-for="item in codeModel.projectSourceList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="督办情况">
            <el-select v-model="supervisestate" placeholder="请选择督办情况" style="width: 100%" filterable clearable multiple collapse-tags @change="concatSuperviseState">
              <el-option v-for="item in codeModel.superviseStateList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="是否留言" v-show="fromQueryPage">
            <el-select style="width:100%" v-model="queryParam.qry_comments" clearable placeholder="请选择">
              <el-option v-for="item in codeModel.enabledList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="是否关注" v-show="fromQueryPage">
            <el-select style="width:100%" v-model="queryParam.qry_focus" clearable placeholder="请选择">
              <el-option v-for="item in codeModel.enabledList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="采购模式">
            <el-select style="width:100%" v-model="purchasepattern" multiple clearable placeholder="请选择" @change="doQueryConcatPurchasePattern">
              <el-option v-for="item in codeModel.MpmPurchasePatternList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="春季/秋季攻势">
            <el-select style="width:100%" v-model="projectattack" multiple clearable placeholder="请选择" @change="doQueryConcatProjectAttack">
              <el-option v-for="item in codeModel.projectattackList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="项目结果" v-show="!fromQueryPage">
            <el-select style="width:100%" v-model="projectresult" multiple clearable placeholder="请选择" @change="doQueryConcatProjectResult">
              <el-option v-for="item in codeModel.projectresultList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="12" :offset="0" v-show="!fromQueryPage">
          <el-form-item label="显示完成项目">
            <el-select style="width:100%" v-model="finishproject" placeholder="请选择" @change="doChangeFinishProject">
              <el-option v-for="item in codeModel.enabledList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="3" :offset="16">
          <el-form-item label="">
            <el-button type="primary" size="mini" @click="doQuery">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="">
            <el-button type="primary" size="mini" @click="resetParam">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
/** 子组件 */
import { validateNull } from '@tapui/utils/validate'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { filterObjectNull, rmbFormat } from '@tapui/utils/util'
export default {
  name: 'detailSearch',
  props: {
    codeModel: {
      type: Object
    },
    // 控制项目阶段筛选显示,false为来自项目管理页，其他为true
    doDisplayState: {
      type: Boolean,
      default: true
    },
    // false为来自项目监管页，其他为true
    fromQueryPage: {
      type: Boolean,
      default: true
    },
    projectlevels: {
      type: Array
    },
    createDepart: {
      type: Array
    },
    queryParams: {
      type: Object
    },
    finishProject: {
      type: String
    }
  },
  watch: {
    queryParam: function(oldV, newV) {
      this.$emit('update:queryParams', this.queryParam)
    }
  },
  computed: {
    projectlevel: function() {
      return this.projectlevels
    },
    createdepart: function() {
      return this.createDepart
    },
    finishproject: function() {
      return this.finishProject
    },
    queryParam: function() {
      return this.queryParams
    }
  },
  data() {
    return {
      supervisestate: [],
      visible: false,
      detailSearchModel: {},
      chanceclueList: [],
      deptOptions: [],
      urlParam: '?',
      deptLoading: false,
      deptCodeArr: '',
      projectstates: [],
      projectsource: [],
      abnormalstates: [],
      daterangeForActualEndDate: '',
      daterangeForFinishDate: '',
      daterangeForBidBeginDate: '',
      daterangeForBidEndDate: '',
      endtype: [],
      pmoprojecttype: [],
      purchasepattern: [],
      projectattack: [],
      projectresult: [],
      qry_projectlevel: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              const date = new Date()
              const firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
              picker.$emit('pick', [firstDay, new Date()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 12)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    // 重置详细查询条件(父组件调用)
    resetQueryParam() {
      // 清空所有查询条件
      this.deptCodeArr = []
      this.endtype = []
      this.pmoprojecttype = []
      this.purchasepattern = []
      this.projectattack = []
      this.abnormalstates = []
      this.projectstates = []
      this.projectsource = []
      this.daterangeForActualEndDate = []
      this.daterangeForFinishDate = ''
      this.daterangeForBidBeginDate = ''
      this.daterangeForBidEndDate = ''
      this.supervisestate = []
    },
    // 重置详细查询条件（详细查询页重置按钮用）
    resetParam() {
      this.$emit('update:projectlevels', [])
      this.$emit('update:createDepart', [])
      // 清空所有查询条件
      this.deptCodeArr = []
      this.endtype = []
      this.pmoprojecttype = []
      this.purchasepattern = []
      this.projectattack = []
      this.abnormalstates = []
      this.projectstates = []
      this.projectsource = []
      this.daterangeForActualEndDate = []
      this.daterangeForFinishDate = ''
      this.daterangeForBidBeginDate = ''
      this.daterangeForBidEndDate = ''
      this.supervisestate = []
      this.$emit('resetQueryParam')
      this.visible = false
    },
     // 督办情况多选框
    concatSuperviseState(data) {
      if (data.length > 0) {
        this.queryParam.qry_supervisestate = data
          .map((item) => {
            return item
          })
          .join(',')
      } else {
        this.queryParam.qry_supervisestate = null
      }
    },
    // 线索机会点多选框
    concatProjectSource(data) {
      if (data.length > 0) {
        this.queryParam.qry_projectsource = data
          .map((item) => {
            return item
          })
          .join(',')
      } else {
        this.queryParam.qry_projectsource = null
      }
    },
    // 部门名称多选框
    doQueryConcatCreateDepart(data) {
      this.$emit('update:createDepart', data)
      if (data.length > 0) {
        this.queryParam.qry_deptcommoncode = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_deptcommoncode = null
      }
    },
    // 项目级别多选框
    doQueryConcatProjectLevel(data) {
      this.$emit('update:projectlevels', data)
      if (data.length > 0) {
        this.queryParam.qry_projectlevel = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_projectlevel = null
      }
    },
    // 结项类型多选框
    doQueryConcatEndType(data) {
      if (data.length > 0) {
        this.queryParam.qry_endtype = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_endtype = null
      }
    },
    // 项目类型多选框
    doQueryConcatPmoProjectType(data) {
      if (data.length > 0) {
        this.queryParam.qry_pmoprojecttype = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_pmoprojecttype = null
      }
    },
    // 采购模式多选框
    doQueryConcatPurchasePattern(data) {
      if (data.length > 0) {
        this.queryParam.qry_purchasepattern = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_purchasepattern = null
      }
    },
    // 春季秋季攻势多选框
    doQueryConcatProjectAttack(data) {
      if (data.length > 0) {
        this.queryParam.qry_projectattack = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_projectattack = null
      }
    },
    doQueryConcatProjectResult(data) {
      if (data.length > 0) {
        this.queryParam.qry_projectresult = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_projectresult = null
      }
    },
    // 异常状态多选框
    doQueryConcatAbnormalState(data) {
      if (data.length > 0) {
        this.queryParam.qry_abnormalstate = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_abnormalstate = null
      }
    },
    // 项目阶段多选框
    doQueryConcatProjectState(data) {
      if (data.length > 0) {
        this.queryParam.qry_projectstate = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_projectstate = null
      }
    },
    // 立项日期选择器确定事件
    daterangeForFinishDateChange(dateSelected) {
      if (dateSelected !== null && dateSelected !== undefined) {
        // 控制日期差不得超过一年
        var beginDateStamp = new Date(dateSelected[0]).getTime()
        var endDateStamp = new Date(dateSelected[1]).getTime()
        if (endDateStamp - beginDateStamp > 1000 * 60 * 60 * 24 * 366) {
          this.$tap.alert('立项时间差不能超过一年', 'warning')
          this.queryParam.startDateForFinisthDate = {}
          this.queryParam.endDaterFinisthDate = {}
          this.daterangeForFinishDate = ''
          return
        }
        this.queryParam.startDateForFinisthDate = dateSelected[0]
        this.queryParam.endDaterFinisthDate = dateSelected[1]
      } else {
        this.queryParam.startDateForFinisthDate = null
        this.queryParam.endDaterFinisthDate = null
      }
    },
    // 结项日期选择器确定事件
    daterangeForActualEndDateChange(dateSelected) {
      if (dateSelected !== null && dateSelected !== undefined) {
        // 控制日期差不得超过一年
        var beginDateStamp = new Date(dateSelected[0]).getTime()
        var endDateStamp = new Date(dateSelected[1]).getTime()
        if (endDateStamp - beginDateStamp > 1000 * 60 * 60 * 24 * 366) {
          this.$tap.alert('结项时间差不能超过一年', 'warning')
          this.queryParam.startDateForActualEndDate = {}
          this.queryParam.endDateForActualEndDate = {}
          this.daterangeForActualEndDate = ''
          return
        }
        this.queryParam.startDateForActualEndDate = dateSelected[0]
        this.queryParam.endDateForActualEndDate = dateSelected[1]
      } else {
        this.queryParam.startDateForActualEndDate = null
        this.queryParam.endDateForActualEndDate = null
      }
    },
    // 挂网日期选择器确定事件
    daterangeForBidBeginDateChange(dateSelected) {
      if (dateSelected !== null && dateSelected !== undefined) {
        // 控制日期差不得超过一年
        var beginDateStamp = new Date(dateSelected[0]).getTime()
        var endDateStamp = new Date(dateSelected[1]).getTime()
        if (endDateStamp - beginDateStamp > 1000 * 60 * 60 * 24 * 366) {
          this.$tap.alert('挂网时间差不能超过一年', 'warning')
          this.queryParam.startDateForBidBeginDate = {}
          this.queryParam.endDateForBidBeginDate = {}
          this.daterangeForBidBeginDate = ''
          return
        }
        this.queryParam.startDateForBidBeginDate = dateSelected[0]
        this.queryParam.endDateForBidBeginDate = dateSelected[1]
      } else {
        this.queryParam.startDateForBidBeginDate = null
        this.queryParam.endDateForBidBeginDate = null
      }
    },
    // 开标日期选择器确定事件
    daterangeForBidEndDateChange(dateSelected) {
      if (dateSelected !== null && dateSelected !== undefined) {
        // 控制日期差不得超过一年
        var beginDateStamp = new Date(dateSelected[0]).getTime()
        var endDateStamp = new Date(dateSelected[1]).getTime()
        if (endDateStamp - beginDateStamp > 1000 * 60 * 60 * 24 * 366) {
          this.$tap.alert('开标时间差不能超过一年', 'warning')
          this.queryParam.startDateForBidEndDate = {}
          this.queryParam.endDateForBidEndDate = {}
          this.daterangeForBidEndDate = ''
          return
        }
        this.queryParam.startDateForBidEndDate = dateSelected[0]
        this.queryParam.endDateForBidEndDate = dateSelected[1]
      } else {
        this.queryParam.startDateForBidEndDate = null
        this.queryParam.endDateForBidEndDate = null
      }
    },
    doChangeFinishProject(data) {
      this.$emit('update:finishProject', data)
    },
    // 远程获取部门列表
    remoteMethodForDept(query) {
      this.deptLoading = true
      getAction('/mis/deptArch/list', { qry_name: query }).then((res) => {
        this.deptLoading = false
        this.deptOptions = res.result.dataList
        this.deptOptions = this.deptOptions.map((item) => {
          return { value: item.code, label: item.name }
        })
      })
    },
    openDeatailSearchDialog() {
      this.visible = true
    },
    /** 执行查询 */
    doQuery() {
      this.visible = false
      this.$emit('upadateParam', this.queryParam)
      this.$emit('loadData', { currentPage: 1 })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-form-item__content {
  width: 70%;
}
/deep/ .el-form-item {
  width: 100%;
}
.dialog /deep/ .el-dialog__body {
  padding: 0 20px;
}
</style>
